<!--
 * @Date: 2022-06-15 09:27:31
 * @Author: 陶子
 * @LastEditTime: 2022-06-16 14:21:25
 * @FilePath: \jk_one-stop_cloud_mobile_v1.0\src\views\warehouseManagement\goodsManagement\SearchTag.vue
 * @pageName: 这是--(物品管理——筛选)--页面
-->
<template>
  <div
    class="search-content wrap-apply"
    :style="{ top: GLOBAL.currentEnvironment ? '0' : '' }"
    v-show="showSearchTag"
  >
    <Search
      ref="topSearch"
      class="search"
      placeholder="出库任务编号 | 物品名称"
      :isAdd="false"
      :isScreen="false"
      :isType="false"
    ></Search>
    <div class="searchBox">
      <van-cell-group>
        <p class="label FormTit"><span></span>出库任务编号</p>
        <van-field v-model="filterForm.taskCode" placeholder="请输入" />
        <div class="bottomLine"></div>
      </van-cell-group>
      <van-cell-group>
        <p class="label FormTit"><span></span>业务类型</p>
        <van-field-select-picker
          label=""
          placeholder="请选择"
          :inputAlign="'left'"
          :supportClear="true"
          v-model="filterForm.types"
          :columns="warehousingTypes"
          :option="{ label: 'text', value: 'value' }"
          @confirm="(itemReport) => selectReport(itemReport, 'types')"
        />
        <div class="bottomLine"></div>
      </van-cell-group>
      <van-cell-group>
        <p class="label FormTit"><span></span>源单号</p>
        <van-field v-model="filterForm.sourceNumber" placeholder="请输入" />
        <div class="bottomLine"></div>
      </van-cell-group>
      <van-cell-group>
        <p class="label FormTit"><span></span>物品名称</p>
        <van-field v-model="filterForm.goodsName" placeholder="请输入" />
        <div class="bottomLine"></div>
      </van-cell-group>
      <van-cell-group>
        <p class="label FormTit"><span></span>客户</p>
        <van-field v-model="filterForm.customerName" placeholder="请输入" />
        <div class="bottomLine"></div>
      </van-cell-group>
    </div>
    <div class="search-bottom">
      <span class="btncancel" @click="btnCancel">重置</span>
      <span class="btnconfirm" @click="btnConfirm">确定</span>
    </div>
    <!-- <van-calendar
      v-model="showCalendar"
      :min-date="minDate"
      :default-date="defaultDate"
      type="range"
      @confirm="onConfirmTime"
      :allow-same-day="true"
      color="#1890FF"
    /> -->
    <!-- <contact-pickers
      :key="userType"
      :visible="showContactPickers"
      :max="5"
      @closePicker="onCloseContactPickers"
      @confirm="confirmChooseUsers"
    ></contact-pickers> -->
  </div>
</template>

<script>
import { getDictItemsByTypes, outboundOrderTypeList } from "@/api/mobile";
import VanFieldSelectPicker from "@/components/ActionSheet/VanFieldSelectPicker";
import ContactPickers from "@/components/choiceuse/ContactPickers";
import Search from "@/components/search";
import moment from "moment";
import store from "@/store";

export default {
  name: "search",
  components: {
    Search,
    VanFieldSelectPicker,
    ContactPickers,
    // outboundOrderTypeList,
  },
  data() {
    return {
      activeIndex: 0,
      showSearchTag: false,
      warehousingTypes: [],
      /***** */
      filterForm: {
        taskCode: "",
        types: "",
        sourceNumber: "",
        goodsName: "",
        customerName: "",
      },
      showCalendar: false,
      defaultDate: [new Date(), null],
      minDate: new Date(2000, 0, 1),
      timeType: "send", // send、 update、 create
      showContactPickers: false,
      userType: "receiverPersion", // receiverPersion createBy updateBy
    };
  },
  computed: {},
  mounted() {},
  created() {
    store.commit("SET_CURRENT_PREFIX", "/jksaas-produce/produce");
    // 获取出库类型;
    outboundOrderTypeList({ type: 4 }).then((res) => {
      if (res.code == 200 && res.result) {
        this.warehousingTypes = res.result;
      }
    });
  },
  methods: {
    moment,
    // 人员选择 清空
    // onClearChooseUsers(userType) {
    //   this.userType = userType;
    //   let userNamesKey = this.userType + "Names";

    //   this.filterForm[userNamesKey] = ""; // 人员name字符串
    //   this.filterForm[this.userType] = ""; //人员id
    // },
    // 人员选择 确认选择回调
    // confirmChooseUsers(val, selectedList, judge) {
    //   if (judge) {
    //     this.showContactPickers = false;
    //     return;
    //   }
    //   let userNamesKey = this.userType + "Names";
    //   let arr = [];

    //   if (selectedList) {
    //     selectedList.forEach((item) => {
    //       arr.push(item.realname);
    //     });
    //   }

    //   this.filterForm[userNamesKey] = arr.join(","); // 人员name字符串
    //   this.filterForm[this.userType] = val ? val : ""; //人员id

    //   this.showContactPickers = false;
    // },
    // 人员选择 关闭
    // onCloseContactPickers(userType) {
    //   this.userType = userType;
    //   this.showContactPickers = false;
    // },
    // 人员选择 打开
    // onShowContactPickers(userType) {
    //   this.userType = userType;
    //   this.showContactPickers = true;
    // },
    // 时间选项 清空
    // onCancelTime(timeType) {
    //   this.timeType = timeType;

    //   let listkey = this.timeType + "Time";
    //   let strkey = this.timeType + "TimeStr";

    //   this.filterForm[listkey] = [];
    //   this.filterForm[strkey] = "";
    // },
    // 时间选择器 确认
    // onConfirmTime(date) {
    //   const [start, end] = date;
    //   this.showCalendar = false;

    //   let listkey = this.timeType + "Time";
    //   let strkey = this.timeType + "TimeStr";

    //   this.filterForm[listkey] = date;
    //   this.filterForm[strkey] = `${this.moment(start).format(
    //     "YYYY-MM-DD"
    //   )} - ${this.moment(end).format("YYYY-MM-DD")}`;
    // },
    // 时间选择器 打开
    // onShowCalendar(timeType) {
    //   this.timeType = timeType;
    //   let listkey = this.timeType + "Time";

    //   if (this.filterForm[listkey].length != 0) {
    //     this.defaultDate = this.filterForm[listkey];
    //   } else {
    //     this.defaultDate = [new Date(), null];
    //   }

    //   this.showCalendar = true;
    // },

    //业务类型选择
    selectReport(itemReport, key) {
      if (itemReport) {
        this.filterForm[key] = itemReport.value;
      } else {
        this.filterForm[key] = "";
      }
    },
    // 打开筛选
    showModal(keyword, dropdownObj, goodTypeList, categoryList, activeIndex) {
      this.showSearchTag = true;
      this.$nextTick(() => {
        this.$refs.topSearch.value = keyword;
      });
    },
    // 重置筛选
    btnCancel() {
      this.$refs.topSearch.value = "";
      this.filterForm = {
        taskCode: "",
        types: "",
        sourceNumber: "",
        goodsName: "",
        customerName: "",
      };
      this.activeIndex = 0;
    },
    // 确认筛选
    btnConfirm() {
      let {
        taskCode,
        types,
        sourceNumber,
        goodsName,
        customerName,
      } = this.filterForm;
      let sureObj = {
        taskCode: taskCode || null,
        types: types || null,
        sourceNumber: sourceNumber || null,
        goodsName: goodsName || null,
        customerName: customerName || null,
        keyword: this.$refs.topSearch.value,
      };

      this.showSearchTag = false;
      this.$emit("getCategory", sureObj);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/theme.scss";
.search-content {
  position: fixed;
  top: 70px;
  width: 100%;
  height: 100vh;
  background: #f5f5f5;
  z-index: 99;
  .formgroup {
    background: #ffffff;
    // padding: 0 0.16rem;
    margin-top: 0.1rem;
    margin-bottom: 0.2rem;
    padding-top: 0.1rem;

    .title {
      width: 0.58rem;
      height: 0.14rem;
      font-size: 0.15rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #191f25;
      line-height: 0.05rem;
      margin-left: 0.16rem;
    }
  }
  .search-bottom {
    width: 100%;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0px;
    padding: 12px;
    font-size: 32px;
    font-weight: 500;
    .btncancel {
      flex: 1;
      background: #f6f6f6;
      // border: 0.01rem solid rgba(25, 31, 37, 0.12);
      box-sizing: border-box;
      height: 78px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 2px;
      margin-right: 1px;
      color: #191f25;
    }
    .btnconfirm {
      flex: 1;
      background: #1890ff;
      box-sizing: border-box;
      height: 78px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 6px;
      color: #ffffff;
    }
  }
}
.bottomLine {
  height: 1px;
  background-color: #f0f0f0;
  margin: 0 3px;
}
.searchBox {
  height: calc(100vh - 295px);
  overflow-y: auto;
  padding: 20px 0;
}
.dh-field {
  padding: 0 34px;
  background: #fff;
  .dh-cell.van-cell {
    padding: 10px 0 14px;
  }
  .dh-cell.van-cell--required::before {
    left: -8px;
  }
  .van-popup {
    border-radius: 20px 20px 0 0;
  }
}
.haveUnitBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding-right: 0.16rem;
  /deep/ .van-cell {
    padding-right: 0;
    width: 2.6rem;
  }
  /deep/ .van-field__control {
    max-width: 3rem;
  }
}
</style>
